import React from 'react';
import { Router, Route, Switch } from 'react-router-dom';
import AuthRoute from './components/AuthRoute';
import KeepAlive from './components/KeepAlive';
import Loading from './components/Loading/index';
import Test from './pages/Test';
import history from './utils/history';
const Login = React.lazy(() => import('@/pages/Login'));
const Layout = React.lazy(() => import('@/pages/Layout'));
const Search = React.lazy(() => import('@/pages/Search'));
const Article = React.lazy(() => import('@/pages/Article'));
const SearchResult = React.lazy(() => import('@/pages/Search/Result'));
const ProfileEdit = React.lazy(() => import('@/pages/Profile/Edit'));
const ProfileFeedback = React.lazy(() => import('@/pages/Profile/Feedback'));
const Chat = React.lazy(() => import('@/pages/Profile/Chat'));

export default function App() {
  return (
    <Router history={history}>
      <React.Suspense fallback={<Loading />}>
        <KeepAlive path="/test" component={Test} />
        <Switch>
          <Route path="/login" component={Login} />
          <Route path="/search" component={Search} exact />
          <Route path="/article/:id" component={Article} />
          <Route path="/search/result" component={SearchResult} />
          <AuthRoute path="/profile" component={ProfileEdit} />
          <AuthRoute path="/profile/edit" component={ProfileEdit} />
          <AuthRoute path="/profile/feedback" component={ProfileFeedback} />
          <AuthRoute path="/profile/chat" component={Chat} />

          {/* <Route path="/test" component={Test} /> */}
        </Switch>
        {/* 1. 替换为KeepAlive */}
        {/* 2. 挪到Switch外面即可 */}
        <KeepAlive path="/" component={Layout} />
      </React.Suspense>
    </Router>
  );
}
